<!-- 车队编辑弹窗 -->
<template>
  <ele-modal
    form
    :width="640"
    :model-value="modelValue"
    :title="title"
    @update:modelValue="updateModelValue"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="退保批单" prop="refund_pdf">
        <file
          botton-text="上传"
          botton-size="small"
          botton-type="success"
          style="margin-right: 8px"
          @done="onUpladDone($event, row)"
        />
        <span
          v-if="form.refund_pdf !== ''"
          @click="openPdf(row.refund_pdf)"
          class="blue pointer"
          >查看</span
        >
      </el-form-item>
      <el-form-item label="实际退保日期" prop="refund_date">
        <el-date-picker
          v-model="form.refund_date"
          type="date"
          placeholder="请选择日期"
          style="width: 150px"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="退保金额" prop="refund_amount">
        <el-input v-model="form.refund_amount" style="width: 150px" />
      </el-form-item>
      <el-form-item label="返还佣金" prop="refund_rebate">
        <el-input v-model="form.refund_rebate" style="width: 150px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="updateModelValue(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        提交
      </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, watch } from 'vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import { useFormData } from '@/utils/use-form-data';
  import { insuranceRefundPlanDone } from '@/api/company';
  import file from '@/components/FileUpload/file.vue';
  const emit = defineEmits(['done', 'update:modelValue']);

  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    /** 修改回显的数据 */
    data: Object,
    action: {
      type: String,
      default: 'offer'
    }
  });

  /** 提交状态 */
  const loading = ref(false);

  /** 表单实例 */
  const formRef = ref(null);
  const title = ref('');

  /** 表单数据 */
  const [form, resetFields] = useFormData({
    id: 0,
    refund_date: '',
    refund_pdf: '',
    refund_amount: '',
    refund_rebate: '',
    insurance_id: 0
  });

  /** 表单验证规则 */
  const rules = reactive({
    refund_date: [
      {
        required: true,
        message: '请选择具体退保日期',
        type: 'string',
        trigger: 'blur'
      }
    ],
    refund_amount: [
      {
        required: true,
        message: '请填写退保金额',
        type: 'string',
        trigger: 'blur'
      }
    ],
    refund_pdf: [
      {
        required: true,
        message: '请上传退保批单',
        type: 'string',
        trigger: 'blur'
      }
    ],
    refund_rebate: [
      {
        required: true,
        message: '请填写需退还的返点金额',
        type: 'string',
        trigger: 'blur'
      }
    ]
  });

  /** 保存编辑 */
  const save = () => {
    console.log(form);
    formRef.value?.validate?.((valid) => {
      if (!valid) {
        return;
      }
      loading.value = true;
      insuranceRefundPlanDone(form)
        .then(() => {
          loading.value = false;
          EleMessage.success('操作成功');
          updateModelValue(false);
          emit('done');
        })
        .catch((e) => {
          loading.value = false;
          console.log(e);
        });
    });
  };
  /** 上传pdf完毕 */
  const onUpladDone = (e, row) => {
    console.log('上传成功', e, row);
    form.refund_pdf = e;
  };
  const openPdf = (url) => {
    window.open(url);
  };

  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };

  watch(
    () => props.modelValue,
    (modelValue) => {
      if (modelValue) {
        title.value = '填写退保信息';

        form.id = props.data.id;
        form.insurance_id = props.data.insurance_id;
        form.refund_date = '';
        form.refund_pdf = '';
        form.refund_amount = '';
        form.refund_rebate = '';
      } else {
        resetFields();
        formRef.value?.clearValidate?.();
      }
    }
  );
</script>
